<template>
	<view class="warn-range">
		<view class="select-wrap rbox box_center">
			<text class="tit">选择病害</text>
			<view class="select">
				<picker mode="selector" :range="pestArr" :value="selIndex" @change="pickerChange">
					<view>{{pestArr[selIndex]}}</view>
				</picker>
			</view>	
		</view>

		<view class="map-wrap">
			<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
		</view>

		<view class="tip rbox box_space_a">
			<text class="item">高风险</text>
			<text class="item">中风险</text>
			<text class="item">低风险</text>
		</view>
		<!-- 公告 -->
		<screenTextScroll :list="msgList" themeCheck="warn" />
		<!-- 表格 -->
		<scroll-view class="h-table" scroll-x>
			<view class="tr">
				<view class="th">身份</view>
				<view class="th">市区</view>
				<view class="th">最高温度</view>
				<view class="th">最低温度</view>
				<view class="th">毒害风险</view>
				<view class="th">毒害风险</view>
				<view class="th">毒害风险</view>
			</view>
			<view class="tr">
				<view class="td">江苏省</view>
				<view class="td">南京市</view>
				<view class="td">38</view>
				<view class="td">38</view>
				<view class="td">中风险</view>
				<view class="td">中风险</view>
				<view class="td">中风险</view>
			</view>
		</scroll-view>
		<view class="btn-wrap rbox box_space_b">
			<view class="btn btn-goast rbox box_center" @tap="goPage('realTimeWarn')">查看实时预警</view>
			<view class="btn btn-normal rbox box_center" @tap="goPage('basicInfo')">订阅通知</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'; /*echarts.min.js为在线定制*/
	import * as chinaJson from '../../echarts/map/json/china.json'; /*echart.min.js为在线定制*/
	import mpvueEcharts from 'mpvue-echarts';
	import screenTextScroll from '../../components/screenTextScroll/screenTextScroll.vue'


	export default {
		data() {
			return {
				echarts,
				data: [
					{
						name: "南海诸岛",
						value: this.randomValue()
					},
					{
						name: '北京',
						value: this.randomValue()
					},
					{
						name: '天津',
						value: this.randomValue()
					},
					{
						name: '上海',
						value: this.randomValue()
					},
					{
						name: '重庆',
						value: this.randomValue()
					},
					{
						name: '河北',
						value: this.randomValue()
					},
					{
						name: '河南',
						value: this.randomValue()
					},
					{
						name: '云南',
						value: this.randomValue()
					},
					{
						name: '辽宁',
						value: this.randomValue()
					},
					{
						name: '黑龙江',
						value: this.randomValue()
					},
					{
						name: '湖南',
						value: this.randomValue()
					},
					{
						name: '安徽',
						value: this.randomValue()
					},
					{
						name: '山东',
						value: this.randomValue()
					},
					{
						name: '新疆',
						value: this.randomValue()
					},
					{
						name: '江苏',
						value: this.randomValue()
					},
					{
						name: '浙江',
						value: this.randomValue()
					},
					{
						name: '江西',
						value: this.randomValue()
					},
					{
						name: '湖北',
						value: this.randomValue()
					},
					{
						name: '广西',
						value: this.randomValue()
					},
					{
						name: '甘肃',
						value: this.randomValue()
					},
					{
						name: '山西',
						value: this.randomValue()
					},
					{
						name: '内蒙古',
						value: this.randomValue()
					},
					{
						name: '陕西',
						value: this.randomValue()
					},
					{
						name: '吉林',
						value: this.randomValue()
					},
					{
						name: '福建',
						value: this.randomValue()
					},
					{
						name: '贵州',
						value: this.randomValue()
					},
					{
						name: '广东',
						value: 20
					},
					{
						name: '青海',
						value: this.randomValue()
					},
					{
						name: '西藏',
						value: 0
					},
					{
						name: '四川',
						value: this.randomValue()
					},
					{
						name: '宁夏',
						value: this.randomValue()
					},
					{
						name: '海南',
						value: this.randomValue()
					},
					{
						name: '台湾',
						value: this.randomValue()
					},
					{
						name: '香港',
						value: this.randomValue()
					},
					{
						name: '澳门',
						value: this.randomValue()
					}
				],
				pestArr: ['默认', '真菌类', '细菌类', '病毒类'],
				selIndex: 0,
				msgList: ['实时预警！高风险高风险，请注意安全！']
			};
		},
		components: {
			mpvueEcharts,
			screenTextScroll
		},
		onLoad() {

		},
		methods: {
			randomValue() {
				return Math.round(Math.random() * 25);
			},
			renderMap(e) {
				const that = this;
				var mydata = that.data;
				let {
					canvas,
					width,
					height
				} = e;
				width = width - 20;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				echarts.registerMap('china', chinaJson);
				canvas.setChart(chart)
				var optionMap = {
					title: {
						text: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}:{c}%'
					},
					//左侧小导航图标
					visualMap: {
						min: 0,
						max: 25,
						left: 'left',
						top: 'bottom',
						// orient:'horizontal',
						// text: ['高', '低'], //取值范围的文字
						inRange: {
							color: ['#0ED2AA', '#F1D417', '#FF0000'] //取值范围的颜色
						},
						show: true, // 图注
						pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
							{
								min: 0,
								max: 5,
								label: '0~5风险率'
							},
							{
								min: 5,
								max: 10,
								label: '5~10风险率'
							},
							{
								min: 10,
								max: 15,
								label: '10~15风险率'
							},
							{
								min: 15,
								max: 20,
								label: '15~20风险率'
							},
							{
								min: 20,
								max: 25,
								label: '20~25风险率'
							},
						],
						hoverLink: true,
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'china',
						roam: false, //不开启缩放和平移
						zoom: 1.2,//视角缩放比例
						label: {
							normal: {
								show: false,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 0.5)' //文字颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [
						{
							type: 'map',
							geoIndex: 0,
							animation: false,
							data: mydata,
						}
					]
				};
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
			},
			pickerChange(e) {
				this.selIndex = e.target.value
			},
			goPage(url) {
				console.log(url)
				wx.navigateTo({
					url: `/pages/${url}/${url}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.warn-range {
		.select-wrap {
			margin-top: 20rpx;
			.tit {
				font-size: 32rpx;
				line-height: 1;
				color: #333;
			}
			.select {
				margin-left: 48rpx;
				width: 430rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 1rpx solid #9E9E9E;
				opacity: 1;
				border-radius: 32rpx;
				picker {
					height: 100%;
					view {
						padding: 0 30rpx;
						font-size: 28rpx;
						color: #666;
						line-height: 60rpx;
					}
				}
			}
		}
		.map-wrap {
			width: 100%;
			height: 600rpx;
		}
		.tip {
			margin-top: 20rpx;
			padding: 0 42rpx;
			.item {
				position: relative;
				font-size: 28rpx;
				&::after {
					position: absolute;
					top: 50%;
					left: -20rpx;
					transform: translateY(-50%);
					content: "";
					width: 12rpx;
					height: 12rpx;
				  background-color: currentColor;
					border-radius: 50%;
				}
				line-height: 1;
				&:nth-of-type(1) {
					color: #FF0000;
				}
				&:nth-of-type(2) {
					color: #F1D417;
				}
				&:nth-of-type(3) {
					color: #0ED2AA;
				}
			}
		}
		.h-table {
			margin: 30rpx 42rpx 0;
			width: calc(100% - 84rpx);
			white-space: nowrap;
			.tr {
				display: block;
				.th {
					padding: 30rpx 15rpx;
					display: inline-block;
					width: 200rpx;
					font-size: 28rpx;
					color: #bbb;
					text-align: center;
					border-top: 1rpx solid #bbb;
					border-bottom: 1rpx solid #bbb;
					border-right: 1rpx solid #bbb;
					&:first-child {
						border-top-left-radius: 20rpx;
						border-left: 1rpx solid #bbb;
					}
					&:last-child {
						border-top-right-radius: 20rpx;
					}
				}
				.td {
					padding: 20rpx 15rpx;
					display: inline-block;
					width: 200rpx;
					font-size: 28rpx;
					color: #bbb;
					text-align: center;
					border-bottom: 1rpx solid #bbb;
					border-right: 1rpx solid #bbb;
					&:first-child {
						border-left: 1rpx solid #bbb;
					}
				}
			}
		}
	
	}
</style>
